<template>
  <div class="vue-swiper" >
    <div id="wrap"  @mouseenter="mouseenterAction"  @mouseleave="mouseleaveAction">
      <ul id="slider">
        <li><div class="img" :style="{backgroundImage: 'url(' + imgList[imgList.length - 1].goodsImgUrl + ')'}" ></div></li>
        <li v-for="item in imgList"  :key="item.goodsImgUrl"><div class="img" :style="{backgroundImage: 'url(' + item.goodsImgUrl + ')'}" ></div></li>
        <li><div class="img" :style="{backgroundImage: 'url(' + imgList[0].goodsImgUrl + ')'}" ></div></li>
      </ul>
    </div>

    <div class="swiper-pagination" id="opts" :style="{ width: imgList.length*14 + 'px' }" slot="pagination">
      <div
        @mouseenter="mouseenterBtn"  @mouseleave="mouseleaveBtn" 
        :class="{ active: index== currentIndex}" 
        v-for="(item, index) in imgList.length"  :key="index"  
        @click="paginationAction(item)">
      </div>
    </div>

    <div  @click="prevAction"  @mouseenter="mouseenterBtn"  @mouseleave="mouseleaveBtn" 
      :class="{'show-button' : showButton }"
      class="swiper-button-prev prev-next-btn" 
      slot="button-prev">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="64">
        <line x1="18" y1="10" x2="4" y2="33" />
        <line x1="4" y1="31" x2="18" y2="54" />
      </svg>
    </div>
    <div  @click="nextAction"  @mouseenter="mouseenterBtn"  @mouseleave="mouseleaveBtn" 
      :class="{'show-button' : showButton }"
      class="swiper-button-next prev-next-btn"
      slot="button-next">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="64">
        <line x1="3" y1="10" x2="17" y2="33"  />
        <line x1="17" y1="31" x2="3" y2="54"  />
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  name: 'swiper2',
  props: {
    imgList: {
      type: Array,
      required: true
    }
  },
  methods: {
    startMove () {
      this.swiperInterval = setInterval(() => {
        this.swiper()
      }, this.swiperOption.autoplay)
    },
    normalTransition () {
      this.swiperWrapObj.style.webkitTransform = 'translateX(-' + this.currentIndex * this.imgWidth + 'px)'
      this.swiperWrapObj.style.transition = '-webkit-transform 500ms'
    },
    refresh () {
      this.swiperWrapObj = document.getElementById('slider')
      this.swiperWrapObj.style.width = (this.imgList.length + 2) * 100 + '%'
      this.imgWidth = document.getElementById('wrap').clientWidth
      this.swiperWrapObj.style.marginLeft = '-' + this.imgWidth + 'PX'
    },
    swiper () {
      this.currentIndex++
      if (this.currentIndex >= (this.imgList.length)) {
        this.currentIndex = 0
        this.swiperWrapObj.style.webkitTransform = 'translateX(' + this.imgWidth + 'px)'
        this.swiperWrapObj.style.transition = '-webkit-transform 0ms'
        setTimeout(() => {
          this.normalTransition()
        }, 10)
      } else {
        this.normalTransition()
      }
    },
    mouseenterAction () {
      this.showButton = true
      clearInterval(this.swiperInterval)
    },
    mouseleaveAction () {
      this.showButton = false
      this.startMove()
    },
    mouseenterBtn () {
      this.showButton = true
    },
    mouseleaveBtn () {
      this.showButton = false
    },
    paginationAction (item) {
      clearInterval(this.swiperInterval)
      this.currentIndex = item - 1
      this.startMove()
      this.normalTransition()
    },
    prevAction () {
      clearInterval(this.swiperInterval)
      if (this.currentIndex <= 0) {
        this.currentIndex = this.imgList.length - 1
        this.swiperWrapObj.style.webkitTransform = 'translateX(-' + (this.currentIndex + 1) * this.imgWidth + 'px)'
        this.swiperWrapObj.style.transition = '-webkit-transform 0ms'
        setTimeout(() => {
          this.normalTransition()
        }, 10)
      } else {
        --this.currentIndex
        this.normalTransition()
      }
      this.startMove()
    },
    nextAction () {
      clearInterval(this.swiperInterval)
      ++this.currentIndex
      if (this.currentIndex >= (this.imgList.length)) {
        this.currentIndex = 0
        this.swiperWrapObj.style.webkitTransform = 'translateX(' + this.imgWidth + 'px)'
        this.swiperWrapObj.style.transition = '-webkit-transform 0ms'
        setTimeout(() => {
          this.normalTransition()
        }, 10)
      } else {
        this.normalTransition()
      }
      this.startMove()
    }
  },
  mounted () {
    this.refresh()
    this.startMove()
  },
  destroyed () {
    clearInterval(this.swiperInterval)
  },
  data () {
    return {
      showButton: false,
      swiperInterval: null,
      currentIndex: 0,
      imgWidth: 0,
      swiperWrapObj: null,
      swiperOption: {
        autoplay: 3000
      }
    }
  }
}
</script>

<style  lang="scss" scoped>
.vue-swiper{
  position:relative;
  width:500px;
  height:375px;  
  #wrap {
    position:relative;
    height:375px;
    overflow:hidden;
    #slider {
      height:100%;
      li {
        float:left;
        width:500px;
        height:100%;
        text-align:center;
        .img{
          height: 100%;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        }
      }
    }
  }
  #opts {
    position:absolute;
    height:0;
    margin-top:-38px;
    color:#fff;
    text-align:center;
    left: 50%;
    transform: translateX(-50%);
    > div {
      float:left;
      width:10px;
      height:10px;
      border-radius: 100%;
      margin-right:4px;
      background:#fff;
      cursor:pointer;
    }
    .active{
      background: #fcaf16;
    }
  }
  .prev-next-btn{
    visibility: hidden;
    position: absolute;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    width:21px;
    height:64px;
    background-color:rgba(0,0,0,0);
    transition:all 0.3s;
    -moz-transition:all 0.3s; 
    -webkit-transition:all 0.3s; 
    -o-transition:all 0.3s; 
    svg line{
      stroke-width:3;
      stroke: rgba(255,255,255,0);
    }
  }
  .show-button{
    visibility: visible;
    background-color:rgba(0,0,0,0.4);
    svg line{
      stroke: rgba(255,255,255,1);
    }
  }
  .swiper-button-prev{
    left:0;
  } 
  .swiper-button-next{
    right:0;
  }
}
</style>
